<template>
	<view class="box">
		<!-- <view class="main" v-for="(item,index) in list" :key="index">
			<p>
				<image :src="item.Image1" mode=""></image>
				{{item.title}}
			</p>
			<input type="text" placeholder="请输入答案">
			
		</view> -->
		<view class="main" v-for="(item,index) in list1" :key="index">
		    <view class="img1">
		    	<p>{{item.title}}</p>
					<!-- <input type="text" placeholder="{{item.title}}" id="val"/> -->
					<p class="input">{{item.title}}</p>
		    </view>			
				
		</view>
		<button id="but">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// list: [{
				// 		Image1: "/static/xing.png",
				// 		title: "红军长征分几路进行",
				// 	},
				// 	{
				// 		Image1: "/static/xing.png",
				// 		title: "中央红军在何地突破国民党军的最后一道封锁线"
				// 	},
				//  {
				// 		Image1: "/static/xing.png",
				// 		title: "中央红军锐减的主要原因"
				// 	},
				// 	{
				// 		Image1: "/static/xing.png",
				// 		title: "长征中，第一个到达陕北的军队是哪个"
				// 	},
				// ],
				list1:[]
			}
		},
		onLoad() {
 this.click()
		},
		methods: {
			click: function() {
						var that=this
						uni.request({
							url: "http://180.76.120.179:8081/xiaochengxu/index/details",
							data: "",
							success(res) {
								console.log(res.data.data)
								var datas = res.data.data
								that.list1=datas
							}
						})
					},
			change: function() {
				uni.navigateTo({
					url: "/pages/answer/unlock"
				})
			}
		}
	}
</script>

<style>
	.main {
		width: 90%;
		margin: 0.5rem auto;
		padding: 1rem 0;
	}

	.main p {
		font-size: 1.2rem;
	}

	.main p image {
		width: 1rem;
		height: 1rem;
	}

	.main input {
		width: 100%;
		border-bottom: 0.1rem #ccc solid;
		margin: 1rem 0;
		padding: 0.5rem;
	}
	.main .input {
		width: 100%;
		border-bottom: 0.1rem #ccc solid;
		margin: 1rem 0;
		color: #ccc;
		font-size:30rpx;
		padding: 0.5rem;
	}
	button{background-color:#f00;color:#fff;width:90%;margin:1rem auto;border-radius:0.5rem;}
</style>
